<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="js/jquery.min.js?v=2.1.4"></script>
        <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form" lay-filter="myform">
                    <div class="layui-form-item">
                        <label for="L_type_1_text" class="layui-form-label">
                            <span class="x-red">*</span>所属分类</label>
                        <div class="layui-input-inline">
<!--                            <input type="text" id="type_1_text" name="type_1_text" required="" lay-verify="name" autocomplete="off" class="layui-input"></div>-->
                        <select name="goodsType" lay-verify="required" lay-filter="goodsType" id="goodsType" lay-search>

                        </select>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_email" class="layui-form-label">
                            <span class="x-red">*</span>商品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="name" name="name" required="" lay-verify="name" autocomplete="off" class="layui-input"></div>
                        </div>
                    <div class="layui-form-item">
                        <label for="L_code" class="layui-form-label">
                            <span class="x-red">*</span>商品编号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="code" name="code" required="" lay-verify="name" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_wm_type_text" class="layui-form-label">
                            <span class="x-red">*</span>库存类型</label>
                        <div class="layui-input-inline">
<!--                            <input type="text" id="wm_type_text" name="wm_type_text" required="" lay-verify="name" autocomplete="off" class="layui-input"></div>-->
                            <select name="goodsWmType" lay-verify="required" lay-filter="goodsWmType" id="goodsWmType" lay-search>

                            </select>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_goods_unit_text" class="layui-form-label">
                            <span class="x-red">*</span>单位</label>
                        <div class="layui-input-inline">
<!--                            <input type="text" id="goods_unit_text" name="goods_unit_text" required="" lay-verify="name" autocomplete="off" class="layui-input"></div>-->
                            <select name="unit" lay-verify="required" lay-filter="unit" id="unit" lay-search>

                            </select>
                    </div>

                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>商品定价</label>
                        <div class="layui-input-inline">
                            <input type="text" id="price" name="price" required="" lay-verify="price" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_sort" class="layui-form-label">
                            <span class="x-red">*</span>商品排序</label>
                        <div class="layui-input-inline">
                            <input type="text" id="sort" name="sort" required="" lay-verify="price" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label for="L_pass" class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea id="desc" name="desc" placeholder="请输入描述..." class="layui-textarea" spellcheck="false"></textarea></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="modify" lay-submit="">修改</button></div>
                </form>
            </div>
        </div>
        <input id="id" type="hidden">
        <script>

        layui.use(['form', 'layer','jquery'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                //自定义验证规则
                form.verify({
                    price: function(value) {
                    	if (value.length==0) {
                            return '请输入价格';
                        }
                        if (value.length > 6) {
                            return '价格不能超过10万';
                        }
                    },
                });

                //监听提交
                form.on('submit(modify)',
                function(data) {
                    console.log(data);
                    //发异步，把数据提交给php
                    doSubmit();

                    return false;
                });
                init(form);
            });
        </script>
<script type="text/javascript">

var imageURL="";
function doSubmit(){
	layer.confirm('您确定要修改吗？', {
		  btn: ['确定','取消'] //按钮
		}, function(){
			modify();
		}, function(){

		});
}
function modify(){
	var id=$("#id").val();
	var price=$("#price").val();
	var name=$("#name").val();
	var desc=$("#desc").val();
	var code=$("#code").val();
	var unit=$("#unit").val();
	var type_1=$("#goodsType").val();
	var wm_type=$("#goodsWmType").val();
	var type_1_text=$("#type_1_text").val();
	var wm_type_text=$("#wm_type_text  ").val();
	var goods_unit_text=$("#goods_unit_text ").val();
	var sort=$("#sort").val();

    var jonsStr=JSON.stringify({
        "id":id,
        "price":price,
        "name":name,
        "desc":desc,
        "code":code,
        "unit":unit,
        "type_1":type_1,
        "wm_type":wm_type,
        "type_1_text":type_1_text,
        "wm_type_text":wm_type_text,
        "goods_unit_text":goods_unit_text,
        "sort":sort
    });

	$.ajax({
           url:'/mgr/goods',
           type:'put',
           dataType:'json',//服务器端返回的数据格式是json
           contentType: 'application/json;charset=utf-8',
		   data: jonsStr,//发给服务器端的数据
           success:function(res){   //data:服务器端返回给浏览器端的数据
		   		if(res.code==0){
		   			layer.alert(res.msg, {
                        icon: 6
                    },
                    function() {
                        //关闭当前frame
                        xadmin.close();

                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
		   		}else{
		   			alert(res.msg);
		   		}
           },
		   error:function (XMLHttpRequest, textStatus, errorThrown) {
        	   		alert(XMLHttpRequest);
        	   		alert(textStatus);
        	   		alert(errorThrown);
           }

       });
}

function getParam(variable){
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
    }
    return(false);
}
/*
为了让 select中的数据显示到页面上，以及让其选中相应的选项，都需要form对象参与
 */
function init(form){
    var id=getParam("id");

    //发请求，获取select控件的选项
    $.ajax({
        url:'/goodsType', /*接口域名地址*/
        type:'get',
        async:false,//异步
        data: {},
        success:function(res){
            //console.log(res.data);
            if(res.code==0){

                var list = res.data;
                var s = '<option value="-1">请选择类别</option>';

                $.each(list, function (i, it) {
                    s = s + '<option value="' + it.id + '">' + it.name + '</option>';
                });

                console.log("s::::"+s)

                $("#goodsType").html(s);
                form.render('select');//渲染该控件----将数据显示到页面上
                // form.render();
            }else{
                layer.alert(res.msg, {icon: 0,title: '提示'})
            }
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
        }
    })

    $.ajax({
        url:'/goodsUnit', /*接口域名地址*/
        type:'get',
        async:false,//异步
        data: {},
        success:function(res){
            //console.log(res.data);
            if(res.code==0){

                var list = res.data;
                var s = '<option value="-1">请选择单位</option>';

                $.each(list, function (i, it) {
                    s = s + '<option value="' + it.id + '">' + it.name + '</option>';
                });

                console.log("s::::"+s)

                $("#unit").html(s);
                form.render('select');//渲染该控件----将数据显示到页面上
                // form.render();
            }else{
                layer.alert(res.msg, {icon: 0,title: '提示'})
            }
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
        }
    })

    $.ajax({
        url:'/goodsWmType', /*接口域名地址*/
        type:'get',
        async:false,//异步
        data: {},
        success:function(res){
            //console.log(res.data);
            if(res.code==0){

                var list = res.data;
                var s = '<option value="-1">请选择库存类型</option>';

                $.each(list, function (i, it) {
                    s = s + '<option value="' + it.id + '">' + it.name + '</option>';
                });

                console.log("s::::"+s)

                $("#goodsWmType").html(s);
                form.render('select');//渲染该控件----将数据显示到页面上
                // form.render();
            }else{
                layer.alert(res.msg, {icon: 0,title: '提示'})
            }
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
        }
    })


	$.ajax({
     url:'/mgr/goods/'+id , /*接口域名地址*/
     type:'get',
     async:false,//异步
     data: {},
     success:function(res){
         //console.log(res.data);
         if(res.code==0){
         	$("#id").val(res.data.id);
         	$("#name").val(res.data.name);
         	$("#price").val(res.data.price);
         	$("#type_1_text").val(res.data.type_1_text);

         	$("#type_2_text").val(res.data.type);
         	$("#code").val(res.data.code);
         	$("#wm_type_text").val(res.data.wm_type_text);
         	$("#goods_unit_text").val(res.data.goods_unit_text);
         	$("#sort").val(res.data.sort);
         	$("#desc").val(res.data.desc);
             form.val("myform", {
                 "id": res.data.id
                 ,"price": res.data.price
                 ,"goodsType": res.data.type_1 //设置下拉控件选中
                 ,"unit": res.data.unit //设置下拉控件选中
                 ,"goodsWmType": res.data.wm_type //设置下拉控件选中
             });

         }else{
             layer.alert(res.msg, {icon: 0,title: '提示'})
         }
     },
     error:function (XMLHttpRequest, textStatus, errorThrown) {
	   		alert(XMLHttpRequest);
	   		alert(textStatus);
	   		alert(errorThrown);
		}
 })
}

</script>
    </body>

</html>